<div class="row">
    <div class="col-md-12">
        <div class="card">
            <div class="card-header">
                <h2 class="card-title">七牛云</h2>
            </div>
            <div class="card-block">
                <div style="margin-bottom: 10px;">
                    <el-button @click="handleAdd" type="success" size="mini" icon="el-icon-plus"></el-button>
                </div>
                <el-alert title="由于七牛云官方API不支持分页查询，只能查询所有" type="warning" show-icon :closable="false"></el-alert>
                <br/>
                <div class="table-responsive">
                    <el-table :data="list" size="small">
                        <el-table-column align="center" label="对象KEY" width="270" prop="key"></el-table-column>
                        <el-table-column align="center" label="对象名称" width="260" prop="name"></el-table-column>
                        <el-table-column align="center" label="对象类型" width="150" prop="type"></el-table-column>
                        <el-table-column align="center" label="对象大小(kb)" width="150">
                            <template slot-scope="scope">
                                {{scope.row.size / 1024}} kb
                            </template>
                        </el-table-column>
                        <el-table-column align="center" property="url" width="100" label="预览图">
                            <template slot-scope="scope">
                                <a :href="scope.row.url" target="_blank" style="color:#409EFF;">
                                    <el-image :src="scope.row.url" width="40" lazy></el-image>
                                </a>
                            </template>
                        </el-table-column>
                        <el-table-column align="center" label="链接地址" prop="url"></el-table-column>
                        <el-table-column align="center" label="操作" width="200" class-name="small-padding fixed-width">
                            <template slot-scope="scope">
                                <el-button type="text" size="mini" @click="handleEdit(scope.row.name)" icon="el-icon-edit"></el-button>
                                <el-button type="text" size="mini" @click="handleDel(scope.row.name)" icon="el-icon-delete"></el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </div>
        </div>
    </div>
</div>
